<template>
  <Left />

  <FloatButton :btn_data="btn_data"></FloatButton>
  <Scope v-if="scopeShow" />
</template>

<script lang="ts" setup>
import { onBeforeUnmount, reactive, ref } from 'vue'

import FloatButton from '@/components/FloatButton/index.vue'
import Left from './Panel/left/index.vue'
import Scope from './children/Scope.vue'
import { initAirLine, exitAirLine } from './funs/airLine'
const scopeShow = ref(false)

const btn_data = reactive([
  {
    id: 0,
    name: '低空范围',
    init: () => {
      scopeShow.value = true
    },
    exit: () => {
      scopeShow.value = false
    }
  },
  { id: 1, name: '航线信息', init: initAirLine, exit: exitAirLine }
])

onBeforeUnmount(() => {
  // 离开页面时，清除所有的分析内容
  btn_data.forEach(item => item.exit())
})
</script>
<style lang="scss" scoped>
.info_list {
  @include MarginBottom(10);
  @include MarginLeft(10);
  @include Width(280);
  .item {
    display: flex;
    @include Width(400);
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ffffff2a;
    @include Padding(8, 5, 8, 5);
    .info {
      @include FontSize(16);
      display: flex;
      align-items: center;
      .img {
        margin-right: 5px;
      }
    }
    .count {
      @include FontSize(18);
      font-family: PangMenZhengDao;
      color: #00ffff;
      color: rgb(19, 174, 255);
    }
  }
}
</style>
